<template>
<!-- 收付费作业-自动退费锁定/解锁页面 -->
    <div class="fillcontain">
        <el-form :model="searchParams" :rules="rules" ref="ruleForm" label-width="120px" class="search_container">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="保单号码" prop="chdrNum">
                        <el-input v-model="searchParams.chdrNum" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="text_center">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain  icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="contain">
            <el-row class="bgfff pb15"> 
                <el-col :span="24">
                    <el-button type="danger" plain @click="autoRefundUpdateGo">新增</el-button>
                </el-col>
            </el-row>
          <div class="table_container">
            <el-table
                 v-loading="loading"
                 :data="tableData"
                 highlight-current-row
                 header-cell-class-name="table-header-class"
                 style="width:100%">
                <el-table-column
                min-width="120"
                    property="chdrNum"
                    label="保单号"
                    align='center'
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    min-width="120"
                   property="isHoldRefund"
                   label="暂缓退费否"
                   align='center'
                   show-overflow-tooltip>
                   <template slot-scope="scope">
                      <div class="">
                          <el-col :span="6" v-if="scope.row.isHoldRefund=='1'">是-</el-col>
                          <el-col :span="6" v-if="scope.row.isHoldRefund=='2'">否-</el-col>
                          <el-col :span="12"><el-button type="primary" v-if="scope.row.isHoldRefund=='1'" plain @click="reFundLockOperation(scope.row)">解锁</el-button></el-col>
                          <el-col :span="12"><el-button type="primary" v-if="scope.row.isHoldRefund=='2'" plain @click="reFundLockOperation(scope.row)">锁定</el-button></el-col>
                      </div>
                    </template>
                </el-table-column>
                <!-- 投保/被保人姓 名 -->
                <el-table-column
                 min-width="120"
                   property="insuredName"
                   label="投/被保人姓名"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>

                 <el-table-column
                 min-width="120"
                   property="lockBy"
                   label="加锁人员"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column> 

                <el-table-column
                min-width="120"
                   property="lockTime"
                   label="加锁时间"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column> 

                <el-table-column
                 min-width="120"
                   property="unlockBy"
                   label="解锁人员"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                 min-width="120"
                   property="unlockTime"
                   label="解锁时间"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>

                <!-- <el-table-column 
                 min-width="120"
                    fixed="right"
                   label="操作"
                   align='center'>
                   <template slot-scope="scope">
                        <el-button type="text" size="small" @click="autoRefundUpdateGo(scope.row)">修改</el-button>
                        <el-button type="text" size="small">删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
           <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination
                            background
                            v-if='paginations.total > 0'
                            :page-sizes="paginations.pageSizes"
                            :page-size="paginations.pageSize"
                            :layout="paginations.layout"
                            :total="paginations.total"
                            :current-page='paginations.pageIndex'
                            @current-change='handleCurrentChange'
                            @size-change='handleSizeChange'>
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
          </div>
        </div>
        <!-- 弹框 -->
        <el-dialog
            title="新增"
            :visible.sync="autoRefundDialog"
            width="50%"
            center>
            <el-form ref="form" :model="form"  label-width="120px">
              <el-row>
                  <el-col :span="12" class="common-box">
                        <el-col :span="6" class="common-lab">
                             <label class="labelName">保单号</label>
                        </el-col>
                         <el-col :span="16">
                             <el-input v-model="form.chdrNum" placeholder="" @change="checkChdrNum(form)" ref="forcusChdrNum" clearable></el-input>
                         </el-col>
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-col :span="6" class="common-lab">
                             <label class="labelName">暂缓退费否</label>
                        </el-col>
                         <el-col :span="16">
                            <el-select v-model="form.isHoldRefund" placeholder="请选择" @change="changeHoldReFund(form)">
                                <el-option
                                    v-for="item in reFundLockOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                         </el-col>
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-col :span="6" class="common-lab">
                             <label class="labelName">投/被保人姓名</label>
                        </el-col>
                         <el-col :span="16">
                             <el-input v-model="form.insuredName" placeholder="" clearable></el-input>
                         </el-col>
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-col :span="6" class="common-lab">
                             <label class="labelName">加锁人员</label>
                        </el-col>
                         <el-col :span="16">
                              <el-input v-model="form.lockBy"  disabled placeholder="" clearable></el-input>
                         </el-col>
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-col :span="6" class="common-lab">
                             <label class="labelName">加锁时间</label>
                        </el-col>
                         <el-col :span="16">
                             <el-date-picker
                            v-model="form.lockTime"
                            :disabled="true"
                            type="date"
                            >
                            </el-date-picker>
                         </el-col>
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-col :span="6" class="common-lab">
                             <label class="labelName">解锁人员</label>
                        </el-col>
                         <el-col :span="16">
                            <el-input v-model="form.unlockBy" disabled placeholder="" clearable></el-input>
                         </el-col>
                    </el-col>
                    <el-col :span="12" class="common-box">
                        <el-col :span="6" class="common-lab">
                             <label class="labelName">解锁时间</label>
                        </el-col>
                         <el-col :span="16">
                            <el-date-picker
                            v-model="form.unlockTime"
                            :disabled="true"
                            type="date"
                            >
                            </el-date-picker>
                         </el-col>
                    </el-col>
              </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAutoReFundLockDialog">返 回</el-button>
                <el-button @click="saveAutoReFundLockDialog(form)" class="Defaultbutton">保 存</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import constant from '@/utils/constant';
    import { 
    getAutoReFundLockInfoList,
    updateHoldReFundLockStatus,
    saveAutoReFundLockInfo,
    getInsuredNameByChdrNumParams,
    getBaseOperInfo } from '@/api/selloutLock/reFundInfo';
    export default {
        data(){
            return {
                valueDate:'',
                autoRefundDialog:false,//默认隐藏弹框
                // 查询条件
                rules:{
                    chdrNum:[],
                },
                searchParams:{
                    chdrNum:'', //客户号
                },
                tableData: [],
                loading:false,
              //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
                pickerOptions1: {
                  disabledDate(time) {
                    return time.getTime() > Date.now();
                  }
                },
                newReFundLockStatus:'',//CYQ:20200122-收付费作业-自动退费资料加解锁-锁状态
                reFundLockOptions:[{value:'1',label:'是'},{value:'2',label:'否'}],//CYQ:20200215-收付费作业-自动退费资料加解锁-锁类型(下拉选择)
                form:{
                    insuredName:'111'
                },//CYQ：20200215-收付费作业-自动退费资料加解锁-新增页面容器
                insuredNameNew:'',//CYQ:20200215-收付费作业-自动退费资料加解锁-新增页面时根据保单号进行查询回来的投保人/被保人信息
                lockTimeStatus:false,//CYQ:20200217-收付费作业-自动退费资料加解锁-根据状态锁定时间
                disabelTimeType:false,//
                baseOperInfo :{},//CYQ:维护用户的基本信息
            }
        },
        created(){
          this.getList2();
          this.getBaseOperInfo();
        },
        mounted(){
            //this.getList2();
        },
        methods: {
            
            //CYQ:20200310-收付费作业-自动退费资料加解锁-获取用户基本信息
            getBaseOperInfo(){
                console.log("CYQ:20200310-收付费作业-暂缓退费加解锁-获取用户的基本信息!");
                let params = {};
                getBaseOperInfo(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                    if(res.resultCode == constant.SUCCESS){
                        console.log(res.data);
                        this.baseOperInfo = res.data;
                    }
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            //CYQ:20200217-收付费作业-自动退费资料加解锁-设置时间
            changeHoldReFund(form){
                console.log("CYQ：20200222-收付费作业-暂缓退费加解锁-选择不同类型禁止时间输入框!:"+form.isHoldRefund);
                if(form.isHoldRefund == '1'){
                    this.disabelTimeType = false;
                    this.form.unlockBy = '';
                    this.form.unlockTime = '';
                    this.form.lockBy = this.baseOperInfo.userId;
                }else if(form.isHoldRefund == '2'){
                    this.disabelTimeType = true;
                    this.form.lockBy = '';
                    this.form.lockTime = '';
                     this.form.unlockBy = this.baseOperInfo.userId;
                }
            },
            //CYQ:20200215-收付费作业-自动退费资料加解锁-验证保单号码
            checkChdrNum(form){
                console.log("CYQ:20200215-收付费作业-自动退费资料加解锁-根据保单号查询出投保人/被保人信息");
                this.insuredNameNew = '';
                if(this.form.chdrNum == null || this.form.chdrNum ==''){
                    this.$message({
                        message: '保单号码不允许为空!',
                        type: 'error'
                    });
                    this.$refs.forcusChdrNum.focus();
                    return false;
                }

                if(isNaN(this.form.chdrNum)){
                    this.$message({
                        message: '保单号码必须为数字!',
                        type: 'error'
                    });
                    this.$refs.forcusChdrNum.focus();
                    return false;
                }


                if(this.form.chdrNum.length != 8){
                    this.$message({
                        message: '保单号码必须为8位数字!',
                        type: 'error'
                    });
                    this.$refs.forcusChdrNum.focus();
                    return false;
                }

                let params = {
                    "chdrNum" : this.form.chdrNum
                }
                console.log(JSON.stringify(params));
                this.$store.dispatch('loading/CHANGE_LOADING',true)
                getInsuredNameByChdrNumParams(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                    //console.log(res.data);
                    if(res.resultCode == constant.SUCCESS){
                        this.form.insuredName =  res.data; 
                        this.insuredNameNew   =  res.data;
                        console.log(this.form.insuredName);
                        this.$message({
                            message: res.resultMsg,
                            type: 'success'
                        });
                    }else{
                        this.$refs.forcusChdrNum.focus();
                        return false;
                    }
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                    this.$refs.forcusChdrNum.focus();
                });
            },
            //CYQ:20200215-收付费作业-自动退费资料加解锁-执行新增窗口
            saveAutoReFundLockDialog(form){
                console.log("CYQ:20200215-收付费作业-自动退费资料加解锁-新增退费资料加解锁信息!");
                let params = {
                    "AutoReFundLock"  : this.form,
                }
                console.log("数据:"+JSON.stringify(params));
            
                //非空
                if(this.form.chdrNum == null || this.form.chdrNum ==''){
                    this.$message({
                        message: '保单号码不允许为空!',
                        type: 'error'
                    });
                    this.$refs.forcusChdrNum.focus();
                    return false;
                }

                //非空
                if(this.form.insuredName == null && this.form.insuredName == ""){
                    this.$message({
                        message:"投保人/被投保人姓名不能为空!",
                        type: 'error'
                    });

                    this.$refs.forcusChdrNum.focus();
                    return false;
                }

                this.$store.dispatch('loading/CHANGE_LOADING',true);
                saveAutoReFundLockInfo(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                    if(res.resultCode == constant.SUCCESS){
                       this.autoRefundDialog = false;
                       this.$message({
                            message: res.resultMsg,
                            type: 'success'
                       });
                    }
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                });
            },
            //CYQ:20200215-收付费作业-自动退费资料加解锁-关闭新增窗口
            closeAutoReFundLockDialog(){
                this.autoRefundDialog = false;
                this.getList2();
            },
            //CYQ:20200215-收付费作业-自动退费资料加解锁-更新锁状态
            reFundLockOperation(row){
                this.newReFundLockStatus = '';
                console.log(JSON.stringify(row));
                if(row.isHoldRefund == '1'){
                    this.newReFundLockStatus = '2';//置为否
                }else if(row.isHoldRefund != null && row.isHoldRefund == '2'){
                    this.newReFundLockStatus = '1';//置为是
                }

                //参数
                let params = {
                    "chdrNum"             : row.chdrNum,
                    "isHoldRefund"        : row.isHoldRefund, //原纪录锁状态
                    "newReFundLockStatus" : this.newReFundLockStatus,
                }

                //更新锁状态
                this.$store.dispatch('loading/CHANGE_LOADING',true)
                updateHoldReFundLockStatus(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if(res.resultCode == constant.SUCCESS){
                        this.$message({
                            message: res.resultMsg,
                            type: 'success'
                        });
                        this.getList2();
                    }
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })

            },
            //CYQ:20200215-收付费作业-自动退费资料加解锁-打开修改窗口
            autoRefundUpdateGo(){
                this.autoRefundDialog = true; 
                this.form ={
                    insuredName:'',
                    unlockBy :'',
                    lockTime :''
                };
            },

              //查询列表
            getList2(){
                this.paginations.total=0;
                this.tableData=[];
                let params = {
                    "chdrNum"   : this.searchParams.chdrNum,
                    "pageSize"  : this.paginations.pageSize,
                    "pageNumber": this.paginations.pageIndex,
                    "orderBy"   : "",
                }

        
                this.$store.dispatch('loading/CHANGE_LOADING',true)
                getAutoReFundLockInfoList(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if(res.resultCode == constant.SUCCESS){
                        this.paginations.total = res.data.total;
                        this.tableData = res.data.list;
                    }
                   
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },

            //查询列表
            getList(){
                this.paginations.total=0;
                this.tableData=[];
                let params = {
                    "chdrNum"   : this.searchParams.chdrNum,
                    "pageSize"  : this.paginations.pageSize,
                    "pageNumber": this.paginations.pageIndex,
                    "orderBy"   : "",
                }

                //非空
                if(params.chdrNum == '' || params.chdrNum == '' ){
                    this.$message({
                        message: '请输入保单号码！',
                        type: 'error'
                    });
                    return false;
                }

                //数字
                if(params.chdrNum != '' && isNaN(params.chdrNum)){
                    this.$message({
                        message: '保单号码必须为数字!',
                        type: 'error'
                    });
                    return false;
                }

                this.$store.dispatch('loading/CHANGE_LOADING',true)
                getAutoReFundLockInfoList(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if(res.resultCode == constant.SUCCESS){
                        this.paginations.total = res.data.total;
                        this.tableData = res.data.list;
                        this.$message({
                            message: res.resultMsg,
                            type: 'success'
                        });
                    }
                   
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
               this.paginations.pageSize = pageSize;
               this.getList2();
            },
            // 上下分页
            handleCurrentChange(page) {
               this.paginations.pageIndex = page;
               this.getList2();
            },
            // 根据条件查询列表
            subGetList(){
                this.paginations.pageIndex=1;
                this.getList2();
            },
            // 清除查询条件
            resetSearch(){
                this.searchParams.chdrNum = '';
            }
        },
        computed:{
            ...mapGetters(['tags']),
            reload(){
                return this.$store.state.loading.reload;
            }
        },
        activated(){
            if(this.reload){

                this.$store.dispatch('loading/CHNAGE_RELOAD',false)
                Object.assign(this.$data, this.$options.data());
            }
        }
    }
</script>

<style lang="less" scoped>
    .fillcontain{
        padding-bottom: 0;
    }
    .contain{
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }
   .pagination{
       padding: 10px 20px;
       text-align: right;
   }
   .operationIcon{
        // padding: 12px;
        border:1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px; 
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow:0 0 3px #f9f9f9;
        .svg-icon{
            font-size: 14px;
            fill:#68a3fc;
        }
   }
   .search_container{
       padding: 20px 20px 0 20px;
   }
   .common-box{
        padding-bottom: 15px;
    }
    .common-lab{
        line-height:normal!important;
        text-align: right;
        .labelName{
            text-align: right;
        }
    }
</style>



